<template>
  <div class="profile-container">
    <h2>User Space</h2>
    <div class="user-info">
      <img :src="user.profilePicture" alt="User Profile Picture" class="profile-pic">
      <p><strong>Username:</strong> {{ user.username }}</p>
      <p><strong>Email:</strong> {{ user.email }}</p>
      <p><strong>Joined:</strong> {{ user.joinedDate }}</p>
    </div>
    <button @click="editProfile" class="edit-btn">Edit Profile</button>
    <button @click="logout" class="logout-btn">Logout</button>
  </div>
</template>

<script>
export default {
  name: 'ProfilePage',
  data() {
    return {
      user: {
        username: 'JohnDoe',
        email: 'johndoe@example.com',
        joinedDate: '2023-01-01',
        profilePicture: require('@/assets/user.jpg') // 使用 require 导入图片
      }
    };
  },
  methods: {
    editProfile() {
      this.$router.push('/edit-profile');
    },
    logout() {
      alert('You have been logged out.');
      this.$router.push('/login');
    }
  }
}
</script>

<style>
.profile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.user-info {
  margin-bottom: 20px;
  text-align: center; /* 使文本水平居中 */
}

.profile-pic {
  width: 100px; /* 设置合适的图片大小 */
  height: 100px;
  border-radius: 50%; /* 使头像为圆形 */
  margin-bottom: 20px;
}

.edit-btn, .logout-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 5px;
}

.edit-btn:hover, .logout-btn:hover {
  background-color: #45a049;
}
</style>